@mixin bsd() {
  //box-shadow: 1px 1px 10px $f3color;
  //box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

}

// 背景图片地址和大小
@mixin bis($url) {
  background-image: url($url);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
//定位全屏
@mixin p-tr {
  position: absolute;
  top: 0;
  right: 0;
}

//定位上下左右居中
@mixin p-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

//定位上下居中
@mixin p-ct {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

//定位上下居中
@mixin p-cl {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

// 图标大小
@mixin icon-size($size: 10px) {
  width: $size;
  height: $size;
}

//宽高
@mixin wh($width: 100%, $height: 100%) {
  width: $width;
  height: $height;
}
//字体大小、行高、字体
@mixin font($size: 14px, $color: $titleColor, $line-height: auto, $weight: 400,
 $family: 'Microsoft YaHei') {
  font: #{$size}/#{$line-height} $family;
  font-weight: $weight;
  color: $color;
}

// 禁止文字被鼠标选中
%user-select {
  moz-user-select: -moz-none;
  -moz-user-select: none;
  -o-user-select:none;
  -khtml-user-select:none;
  -webkit-user-select:none;
  -ms-user-select:none;
  user-select:none;
}

// 一行文字超出显示省略号
%ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 多行文字超出显示省略号
@mixin ellipsis-multiline($number: 1) {
  display: -webkit-box;
  overflow: hidden;
  word-break: break-all;
  text-overflow: ellipsis;
  -webkit-line-clamp: $number;
  -webkit-box-orient: vertical;
}


//设置图标 字体大小
@mixin sc-none-fa($size, $color, $line-height: 100% , $weight: 500) {
  font-size: $size;
  color: $color;
  line-height: $line-height;
  font-weight: $weight;
}


// font size
$base-font-size: 1rem;
$font-sizes: (
        xxs: 0.6154,
        xs: 0.7692,
  //10px
        sm: 0.9231,
  //12px
        md: 1,
  //13px
        lg: 1.0769,
  //14px
        xl: 1.2308,
  //16px,,,,
);


$flex-jc: (
        start: flex-start,
        end: flex-end,
        center: center,
        between: space-between,
        around: space-around,
);
$flex-ai: (
        start: flex-start,
        end: flex-end,
        center: center,
        stretch: stretch,
);


//flex 布局和 子元素 对其方式
@mixin fj($type: space-between) {
  display: flex;
  justify-content: $type;
  -webkit-justify-content: $type;
}

// 透明兼容写法
@mixin opacity($number: 0.5) {
  opacity: $number;
  filter: alpha(opacity=#{$number * 100});
}

// 修改input placeholder颜色
@mixin placeholderColor($color: #fff) {
  &::-webkit-input-placeholder {
    color: $color;
  }

  &::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: $color;
  }

  &:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: $color;
  }

  &:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: $color;
  }
}

// 百分比换算
@function percent($num, $total) {
  @return ($num / $total) * 100%;
}


//$spacing-types: (
//        m: margin,
//        p: padding,
//);
//$spacing-directions: (
//        t: top,
//        r: right,
//        b: bottom,
//        l: left,
//);
//$spacing-base-size: 1rem;
//$spacing-sizes: (
//        0: 0,
//        1: 0.25,
//        2: 0.5,
//        3: 1,
//        4: 1.5,
//        5: 3,
//);
//使用：

////编译前
//$height:10px;
//$name:height;
///*
// * @author:#{$name}
// */
//.div-#{$name}{
//  #{$name}: #{$height};
//};


//编译前
//.test1{
//  width: 100px;
//}
//.test1 p{
//  color: #999;
//}
//.test2 {
//  @extend .test1;
//  height: 10px;
//}


//配合变量循环生成CSS
//$class: col-;
//@for $n from 1 through 24 {
//  .#{$class}#{$n} {
//    width: ($n/24)*100%;
//  }
//}
//
//@for $n from 1 through 24 {
//  .offset-#{$n} {
//    margin-left: ($n/24)*100%;
//  }
//}



//在使用阿里图标的时候可以这样
//@each $key, $value in $iconArray {
//  .icon-#{$key}{
//    &:before{
//      content: "#{$value}";
//    }
//  }
//}
//$iconArray       : (
//        "user"         : "\e***"
//)




